<script type="text/javascript">
    var status = '<?php echo $_GET['status'];?>';
    if(status == '-1'){
        alert('fail:<?php echo $_GET['msg'];?>');
    }
    $("#topic_edit").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });
    function on_submit(){
        var title = $("#title").val();
        if(!title){
            alert('名称不能为空');
            return false;
        }
        $("#topic_form").submit();
    }
</script>

<div class="tab-pane active" id="horizontal-form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">×</button>
        <h2 class="modal-title"><?php echo $pageTitle;?></h2>
    </div>

    <form class="form-horizontal" id="topic_form" action="index.php?c=<?php echo $_REQUEST['c'];?>&m=<?php echo $_REQUEST['m'];?>" name="form" method="post" enctype="multipart/form-data">
        <input type="hidden" name="topic_id" id="topic_id" value="<?php echo $topic_id; ?>"/>
        <input type="hidden" name="type" id="type" value="<?php echo $type; ?>"/>
        <input type="hidden" name="page" id="page" value="<?php echo $page; ?>"/>
        <input type="hidden" name="submits" value="1"/>
        <div class="form-group" style="margin-top: 10px;">
            <label for="title" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-8">
                <input type="text" name="topic[title]" value="<?php echo $topic['title'];?>" class="form-control" id="title" placeholder="名称">
            </div>
            <div class="col-sm-2">
                <p class="help-block">不能为空</p>
            </div>
        </div>

        <?php if($type == 2){ ?>
            <div class="form-group">
                <label for="tag_name" class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-8" id="tag_category">
                    <select name="topic[parent_id]">
                        <option value="0">--请选择--</option>
                        <?php foreach($categoryList as $category){ ?>
                            <option value="<?php echo $category['id'];?>" <?php echo $topic['parent_id'] == $category['id'] ? "selected" : "";?>><?php echo $category['title'];?></option>
                        <?php }?>
                    </select>
                </div>
                <div class="col-sm-2">
                    <p class="help-block">不能为空</p>
                </div>
            </div>
        <?php } ?>
        <div class="form-group">
            <label for="status" class="col-sm-2 control-label">显示状态</label>
            <div class="col-sm-8">
                <div class="radio-inline">
                    <label>
                        <input type="radio" name="topic[status]" value="1" <?php if($topic['status'] == 1){ echo 'checked';} ?> />显示
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <input type="radio" name="topic[status]" value="-1" <?php if($topic['status'] == -1){ echo 'checked';} ?> />隐藏
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="icon" class="col-sm-2 control-label">图标</label>
            <div class="col-sm-6">
                <p><a href="javascript:void(0)" class="upload_img"><input type="file" id="topic_img">上传图片</a></p>
                <ul id="topic_img_li" class="list-inline">
                    <?php if(!empty($topic['img'])){ ?>
                        <li>
                            <img src="<?php echo $topic['img'];?>" class="img-thumbnail" width="90px" height="90px" />
                            <input type="hidden" name="topic[img]" value="<?php echo $topic['img'];?>" />
                            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </li>
                    <?php }?>
                </ul>
            </div>
        </div>
        <div class="form-group">
            <label for="topic_bg_img" class="col-sm-2 control-label">背景图</label>
            <div class="col-sm-6">
                <p><a href="javascript:void(0)" class="upload_img"><input type="file" id="topic_bg_img">上传图片</a></p>
                <ul id="topic_bg_img_li" class="list-inline">
                    <?php if(!empty($topic['bg_img'])){ ?>
                        <li>
                            <img src="<?php echo $topic['bg_img'];?>" class="img-thumbnail" width="300px" height="200px" />
                            <input type="hidden" name="topic[bg_img]" value="<?php echo $topic['bg_img'];?>" />
                            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </li>
                    <?php }?>
                </ul>
            </div>
        </div>
        <div class="form-group">
            <label for="description" class="col-sm-2 control-label">描述</label>
            <div class="col-sm-8">
                <textarea name="topic[description]" id="description" cols="50" rows="10" class="form-control"><?php echo $topic['description']; ?></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="display_order" class="col-sm-2 control-label">排序位置</label>
            <div class="col-sm-8">
                <input type="text" name="topic[display_order]" value="<?php echo $topic['display_order'];?>" class="form-control" id="display_order">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <input type="button" onclick="on_submit()" name="btn" value="保存" class="btn btn-primary" />
                <input type="reset" name="reset" value="取消" class="btn btn-default"/>
            </div>
        </div>
    </form>
</div>

<script id="upload-tpl" type="text/html">
    <li>
        <img src="<?php echo IMG_HTTP_PATH;?>{{name}}" class="img-thumbnail" width="90px" height="90px" />
        <input type="hidden" name="topic[img]" value="<?php echo IMG_HTTP_PATH;?>{{name}}" />
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </li>
</script>
<script id="upload-bg-tpl" type="text/html">
    <li>
        <img src="<?php echo IMG_HTTP_PATH;?>{{name}}" class="img-thumbnail" width="300px" height="200px" />
        <input type="hidden" name="topic[bg_img]" value="<?php echo IMG_HTTP_PATH;?>{{name}}" />
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </li>
</script>

<script type="text/javascript">
    $(function () {
        var c_client = new OSS.Wrapper({
            region: 'oss-cn-shanghai',
            accessKeyId: 'LTAIqUbOPUz16zaX',
            accessKeySecret: 'FzQDTPRfbKRrJ3U9d6psiIa36iJ3lF',
            bucket: 'nuanguang-img'
        });
        $('#topic_img').bind('change', function (e) {
            var file = e.target.files[0];
            var ext=/.[^.]+$/.exec(file.name);
            var storeAs = 'topic/a'+new Date()*1 + parseInt(Math.random()*100)+ext;
            c_client.multipartUpload(storeAs, file).then(function (result) {
                var html = template('upload-tpl', {src:result.url,name:storeAs});
                $("#topic_img_li").html(html);
            }).catch(function (err) {
                console.log(err);
            });
        });
        $('#topic_bg_img').bind('change', function (e) {
            var file = e.target.files[0];
            var ext=/.[^.]+$/.exec(file.name);
            var storeAs = 'topic/a'+new Date()*1 + parseInt(Math.random()*100)+ext;
            c_client.multipartUpload(storeAs, file).then(function (result) {
                var html = template('upload-bg-tpl', {src:result.url,name:storeAs});
                $("#topic_bg_img_li").html(html);
            }).catch(function (err) {
                console.log(err);
            });
        });
    })

</script>